import { createStore } from 'vuex'
import {
    getMusicLyric
} from "@/api/musics.js"
import { getPhoneLogin } from '@/api/login.js'
export default createStore({
    state: {
        playList: [{
            // 默认播放歌曲数据
            al: {
                id: 89039055,
                name: "雨爱抖音版",
                pic: 109951164966568500,
                picUrl: "https://p1.music.126.net/2f6UgY8Jc0Dy6jufMdIZeQ==/109951164966568495.jpg",
                pic_str: "109951164966568495"
            },
            id: 1446137141,
            // 歌曲名
            name: '雨爱抖音版',
            // 作者名
            ar: [{ name: '血轮眼' }, { name: '阎王' }]
        }],
        // 默认的播放歌曲数组的下标
        playListIndex: 0,
        // 控制显示暂停图标的数据
        isbtnShow: true,
        // 控制显示当前播放的弹出层
        detailShow: false,
        // 歌词数据
        lyricList: {},
        // 当前歌曲的播放时间
        currentTime: 0,
        // 歌曲的总时长
        duration: 0,
        // 标记是否有登录的数据
        // isLogin: false,
        // 控制是否显示底部播放组件的数据
        isFooterMusic: true
    },
    getters: {},
    mutations: {

        // 监听变更暂停、播放图标的事件
        updateIsbtnShow(state, val) {
            state.isbtnShow = val
        },

        // 监听点击不同歌曲，更改播放歌曲列表数据
        updatePlayList(state, val) {
            state.playList = val
        },

        // 监听点击搜索出来的歌曲追加在播放列表的事件
        pushPlayList(state, val) {
            state.playList.push(val)
        },

        // 监听点击推荐歌单列表里面每一首歌时，播放列表则切换的事件
        updatePlayListIndex(state, val) {
            state.playListIndex = val
        },

        // 监听更改控制当前播放弹出层的显示数据
        updateDetailShow(state) {
            state.detailShow = !state.detailShow
        },

        // 监听更改歌词数据
        updateLyricList(state, val) {
            state.lyricList = val
        },

        // 监听更改当前歌曲的播放时间
        updateCurrentTime(state, val) {
            state.currentTime = val
        },

        // 监听更改歌曲总时长事件
        updateDuration(state, val) {
            state.duration = val
        },
    },
    actions: {
        // 请求获得歌词数据
        async getLyric(context, val) {
            const { data: res } = await getMusicLyric(val)
            if (res.code !== 200) {
                console.log('请求歌词失败');
            }
            // 请求回来的歌词数据需要赋值给lyricList，供其他组件使用
            context.commit('updateLyricList', res.lrc)
        },

        // 请求登录数据
        async getLogin(context, val) {
            const { data: res } = await getPhoneLogin(val)
            if (res.code !== 200) {
                console.log('请求登录失败');
            }
            return res
        }
    },
    modules: {}
})